<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试bootstrap</title>
    <!-- 引入bootstrap在线资源 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <!-- 下载之后的资源 -->
    <link rel="stylesheet" href="./css/bootstrap4.6.2.css">
</head>

<body>
    <div class="container">
        <div class="row justify-content-md-center">
            <!-- row 变成栅格布局 一行12个格子 -->
            <!-- col-? 控制内容的宽度 ? 不能超过12 -->
            <!-- col-auto 由内容控制实际宽度 -->
            <div class="col-2">第一部分</div>
            <div class="col-auto">自己决定你想要多宽第二部分</div>
            <div class="col-2">第三部分</div>
        </div>

        <h1>这是一个h1标签</h1>

        <p class="lead">
            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
        </p>

        <p>
            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
        </p>
        <code>&lt;p&gt;</code><span>p标签是一个块标签</span>
        <p>&lt; &gt; &nbsp; &amp; &quot; &reg; &copy; &</p>

        <pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
            &lt;p&gt;And another line of sample text here...&lt;/p&gt;
            </code></pre>

        To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
        To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
        <img src="../images/001.jpg" class="img-thumbnail" alt="">
        <table class="table table-borderless table-hover">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First Name</th>
                    <th scope="col">Last Name</th>
                    <th scope="col">Username</th>
                </tr>
            </thead>
            <tbody>
                <tr class="table-primary">
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>

        <span class="badge badge-danger">新品</span>
        <span class="badge badge-pill badge-success">Success</span>
        <a href="#" class="badge badge-primary">Primary</a>

    </div>
</body>

</html>